<template>
	<view class="rule">
		<div class="titleBox">
			<p :class="{active:activeIndex==1}">VIP等级</p>
			<p @click="changeActiveSlide()">主播等级</p>
			<p @click="changeActiveSlide()">爵位等级</p>
		</div>
		<div class="swiper-scrollbar"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<!-- vip等级-->
				<div class="swiper-slide">
					<div class="ruleItem viprule">
						<p class="levelTitle">
						<image :src="$BASE_URL+'/st/mini/static/img/level/dengjimingcheng.png'" mode="" style="width: 38upx;height: 38upx;margin-right: 10upx;"></image>等级名称</p>
						<p class="lordDesc">VIP等级</p>
					</div>
					<div class="ruleItem viprule">
						<p class="levelTitle">
							<image :src="$BASE_URL+'/st/mini/static/img/level/dengjishuoming.png'" mode="" style="width: 38upx;height: 38upx;margin-right: 10upx;"></image>等级说明</p>
						<p class="lordDesc">
							VIP等级是根据用户在应用内的消费金额计算，消费100钻石即可成为VIP1，累计消费金额越高，VIP等级越高，成为VIP后20日内无任何消费，VIP将失效，VIP等级保留，消费任意金额即可重新点亮VIP等级。
						</p>
						<div class="table">
							<div class="title">
								<p>等级名称</p>
								<p>等级图标</p>
								<p style="width: 246upx;">消费金额(元)</p>
							</div>
							<div v-for="(item,index) in vipList" class="contenBox">
								<p>VIP{{index}}</p>
								<p style='display: flex;align-items: center;justify-content: center;'>
									<img v-if="index==0" class="vipPic"
										:src="$BASE_URL+'/st/mini/static/img/vip1/vip'+index+'@2x.png'" alt="" />
									<img v-else-if="index==20" class="vipPic"
										:src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+index+'.gif'" alt="" />
									<img v-else class="vipPic" :src="$BASE_URL+'/st/mini/static/img/vip1/vip_'+index+'@2x.png'"
										alt="" />
								</p>
								<p style="width: 246upx;">{{item}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex:1,
				vipList: ['0', '1~499', '500~999', '1000~2999', '3000~6999', '7000~9999', '10000~29999', '30000~49999',
					'50000~79999', '80000~159999', '160000~299999', '300000~499999', '500000~999999',
					'1000000~1299999', '1300000~1599999', '1600000~1999999', '2000000~2599999', '2600000~4999999',
					'5000000~9999999', '10000000-19999999', '20000000以上'
				]
			}
		},
		methods: {
			changeActiveSlide() {
				uni.showToast({
					title: '更多精彩请下载“哩咔”APP',
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleBox p.active {
		color: #000000;
		font-weight: bold;
	}

	.titleBox {
		width: 600upx;
		height: 50upx;
		font-size: 30upx;
		color: #666666;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		padding: 0;
		margin: auto;
	}

	.titleBox p {
		width: 200upx;
		text-align: center;
		white-space: nowrap;
	}

	.titleBox p.active {
		color: #000000;
		font-weight: bold;
	}

	.ruleItem {
		width: 100%;
		height: auto;
		padding-bottom: 40upx;
		text-align: left;
		letter-spacing: 1upx;
	}

	.lordDesc {
		height: auto;
		line-height: 40upx;
		font-size: 24upx;
		color: #282b3c;
		padding: 0 75upx;
		padding-top: 5upx;
	}

	/*vip等级*/
	.levelTitle {
		height: 38upx;
		margin-top: 24upx;
		font-size: 30upx;
		color: #734905;
		line-height: 42upx;
		padding-left: 44upx!important;
		text-align: left;
		font-weight: bold;
	}

	.viprule {
		padding-bottom: 20upx;
	}

	.viprule p {
		padding-left: 95upx;
	}

	.table {
		margin: auto;

		width: 600upx;
		overflow: hidden;
		border: solid 1px #e6e6e6;
		border-radius: 30upx;
		border-right: none;
		margin-top: 30upx;
		letter-spacing: 0;
		margin-bottom: 90upx;
	}

	.table p {
		width: 188upx;
		height: 60upx;
		border-right: solid 1upx #e6e6e6;
		text-align: center;
		line-height: 60upx;
		padding-left: 0;
	}

	.title {
		height: 62upx;
		background: #efa800;
		font-size: 24upx;
		border-bottom: solid 1upx #e6e6e6;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		white-space: nowrap;
	}

	.contenBox {
		height: 60upx;
		background: none;
		font-size: 24upx;
		border-bottom: solid 1upx #e6e6e6;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		white-space: nowrap;
		color: #282b3c;
	}

	.vipPic {
		width: 66upx;
		height: 28upx;
	}
</style>
